<template>
  <div class="my-task" name="myTask">
    <div class="title pl10">
      <span>我的项目</span>
      <div class="right-icon" @click="jumpUrlHandler">
        <span>查看全部</span>
        <el-icon><ArrowRightBold /></el-icon>
      </div>
    </div>
    <ul class="task-list" v-if="tableList.length">
      <el-scrollbar>
        <li class="pl10" v-for="(item, key) in tableList" :key="key" @click="jumpUrlProject(item)">
          <span>{{ item.name }}</span>
          <span :style="`background: ${taskStatusColor(item.status)}`">{{
            conversionDisplay(item.status, dict["projectStatus"])
          }}</span>
        </li>
      </el-scrollbar>
    </ul>
    <div v-else class="task-list"><el-empty></el-empty></div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, computed, getCurrentInstance } from "vue";
import { myProjectApi } from "@/api/modules/home";
import { useUserStore } from "@/stores/modules/user";
import { Dict } from "@/api/interface";
import { getParamByParentIdList } from "@/api/modules/sys"; // exportUserInfo,BatchAddUser
import { useAuthStore } from "@/stores/modules/auth";
import { useRouter } from "vue-router";

// hook
const authStore = useAuthStore();
const router = useRouter();
// 变量
const cxt = getCurrentInstance();
const dict = cxt?.appContext.config.globalProperties.$dict;
let dictList: Dict.ResDictList = reactive({});
const userStore = useUserStore();
const userId = computed(() => userStore.userInfo.id);
// computed
const url = computed(() => {
  let url = "";
  const obj = authStore.authMenuList.find(item => item.name === "project");
  if (obj && obj.children.length) {
    url = obj.children[0].path;
  }
  return url;
});
/**方法 */
const jumpUrlHandler = () => {
  router.push(url.value);
};
const jumpUrlProject = item => {
  router.push({ path: "/project/detail", query: { id: item.id } });
};
// 查询列表数据
const tableList = ref([]);
const getTableList = async () => {
  const list: string[] = [dict.projectStatus];
  dictList = await getDicList({ parentIdList: list.join(",") });
  const { data } = await myProjectApi({ userId: userId.value });
  tableList.value = data.slice(-5);
};

// 获取字典数据
const getDicList = async (params: Dict.ResDictList) => {
  const { data } = await getParamByParentIdList(params);
  return data || [];
};

// 转换显示
const conversionDisplay = (id: string, type: string) => {
  const listItem = dictList[type]?.find(item => item.id === id);
  return listItem?.name;
};
const taskStatusColor = (val: string) => {
  switch (val) {
    case "1790295879995883520": // 筹备中
      return "#F6B053 ";
    case "1790295903769198592": // 已启动
      return "#535BF6";
    case "1790295925667659776": // 已验收
      return "#1DC83A";
    case "1793567569114824704": // 暂停中
      return "#F65353";
    case "1793568122704232448": // 已终止
      return "#B4B4B4";
  }
};

onMounted(() => {
  getTableList();
});
</script>
<style scoped lang="scss">
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.my-task {
  padding: 0 20px 18px;
  margin-bottom: 10px;
  background: #ffffff;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    line-height: 72px;
    color: #333333;
    .right-icon {
      display: flex;
      gap: 10px;
      align-items: center;
      font-size: 16px;
      cursor: pointer;
      .el-icon {
        font-size: 14px;
      }
    }
  }
  .task-list {
    height: 320px;
    li {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #f2f2f2;
      span:last-child {
        height: 24px;
        padding: 0 18px;
        margin-right: 30px;
        font-size: 12px;
        line-height: 24px;
        color: #ffffff;
        background: #5378f6;
        border-radius: 14px;
      }
      &:hover {
        background: var(--el-color-primary-light-9);
      }
    }
  }
}
</style>
